<template>
    <div class="left-container">

        <el-menu default-active="2" class="full-height-menu" @open="handleOpen" @close="handleClose"
            active-text-color="blue" router>
            <template v-for="(item, index) in homeChildrenMenus">
                <el-submenu :index="item.path || String(index)" class="sub-right-menu" :key="index" v-if="!item.hiden">
                    <template slot="title">
                        <i :class='item.iconClass'></i>
                        <span>{{ item.meta.title }}</span>
                    </template>


                    <!-- <el-menu-item v-for="(child) in item.children" :key="child.path"
                        :index="'/home/student/' + child.path">
                        <i :class='child.iconClass'></i>
                        <span>{{ child.meta.title }}</span>
                    </el-menu-item> -->
                    <!-- 渲染子菜单 -->
                    <el-menu-item v-for="(child, childIndex) in item.children" :key="childIndex"
                        :index="'/home/student/' + child.path">
                        <i :class="child.meta.icon"></i>
                        <span>{{ child.meta.title }}</span>
                    </el-menu-item>

                </el-submenu>
            </template>

        </el-menu>
    </div>
</template>
<script>

export default {
    computed: {
        // 过滤出home路由下的子路由
        homeChildrenMenus() {
            // 从路由配置中找到home路由
            const homeRoute = this.$router.options.routes.find(route => route.path === '/home')

            // 如果找到home路由且有子路由，则返回子路由
            if (homeRoute && homeRoute.children) {
                console.log("找到home的子路由")
                return homeRoute.children
            }
            console.log("没有找到home的子路由")

            return []
        },

        data() {
            return {
                menus: []
            }

        }
    },
    methods: {
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            console.log(key, keyPath);
        }
    }, created() {
        console.log('All routes:', this.$router.options.routes);
        console.log('Current route:', this.$route);
        this.menus = this.$router.options.routes
    }
}

// 在此添加组件的其他逻辑
</script>
<style scoped lang="less">
/* 在此添加组件的样式 */

.left-container {
    height: 100vh;


    .full-height-menu {
        height: 100%;
        border-right: none;
        background-color: aqua;

        .sub-right-menu {
            background-color: aqua;
        }


    }



}
</style>